@extends('layout.admin.master')
@section('css')
  <link rel="stylesheet" href="{{asset('org/wxbutton/wxbutton.css')}}">

  @endsection
@section('content')
  <div class="card mt-4">
    <div class="card-body">
      <div class="header-body mt--5 mt-md--6">
        <div class="row align-items-center">
          <div class="col">
            <ul class="nav nav-tabs nav-overflow header-tabs">
              <li class="nav-item">
                <a href="{{route('wechat.wxbutton.index')}}" class="nav-link ">
                  按钮列表
                </a>
              </li>
              <li class="nav-item">
                <a href="{{route('wechat.wxbutton.create')}}" class="nav-link active">
                  添加按钮
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <form action="{{route('wechat.wxbutton.store')}}" method="post">
      @csrf
      <div class="row" id="app">
        <div class="col-5">
          <div class="phone">
            <div class="phone-container">
              <div class="menu" v-for="(v,k) in bts.button" >
                <h5 @click="active(v)" ><span @click="delto(k)"  class="fe fe-x-circle"></span>@{{ v.name }}</h5>
                <dd >
                  <dl @click="active(m)" v-for="(m,n) in v.sub_button"><span @click="delse(v,n)" class="fe fe-x-circle"></span>@{{ m.name }}</dl>
                  <dl v-if="v.sub_button.length<5" @click="addsecond(v)"><span class="fe fe-plus-circle"></span>添加二级</dl>
                </dd>
              </div>
              <div class="menu" v-if="bts.button.length<3">
                <h5  @click="addtopbutton()"><span class="fe fe-plus-circle"></span>添加菜单</h5>
              </div>
            </div>
          </div>
        </div>

        <div class="col-7">
          <div class="card">
            <div class="card-body">
              <div class="form-group">
                <label for="">按钮主题</label>
                <input type="text" name="name" id="" class="form-control" placeholder="" aria-describedby="helpId">
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <div class="form-group">
                <label for="">按钮名称</label>
                <input type="text" v-model="bt.name"  class="form-control" placeholder="" aria-describedby="helpId">
              </div>
              <div class="form-group">
                <label for="">类型：</label>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" v-model="bt.type"  type="radio"   value="view">
                  <label class="form-check-label" for="inlineRadio1">链接</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" v-model="bt.type"  name="inlineRadioOptions" id="inlineRadio2" value="click">
                  <label class="form-check-label" for="inlineRadio2">关键词</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" v-model="bt.type"  name="inlineRadioOptions" id="inlineRadio2" value="">
                  <label class="form-check-label" for="inlineRadio2">按钮</label>
                </div>
              </div>
              <div class="form-group"  v-if="bt.type=='view'">
                <label for="">链接</label>
                <input type="text" v-model="bt.url" class="form-control" placeholder="" aria-describedby="helpId">
              </div>
              <div class="form-group" v-if="bt.type=='click'" >
                <label for="">关键词</label>
                <input type="text" v-model="bt.key" class="form-control" placeholder="" aria-describedby="helpId">
              </div>
            </div>
            <textarea hidden name="data" id="" cols="30" rows="10">@{{bts}}</textarea>
            <button class="btn btn-success">保存数据</button>
          </div>
        </div>
      </div>
    </form>
  </div>
@endsection
@push('js')
  <script>
    require(['{{asset('org/wxbutton/wxbutton.js')}}'],function (wx) {
        wx({
            button:[]
        });
    })
  </script>
  @endpush